<template>
  <!--工具栏-->
  <div class="head-container">
    <!--    <div class="head-container">-->
    <!--      <div v-if="crud.props.searchToggle">-->
    <!--        &lt;!&ndash; 搜索 &ndash;&gt;-->
    <!--        <el-input v-model="query.sampleId" clearable size="small" placeholder="输入样品id查询" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
    <!--        <rrOperation />-->
    <!--      </div>-->
    <!--    </div>-->
    <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
    <crudOperation :permission="permission" />
    <!--表单组件-->
    <el-dialog
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :append-to-body="true"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="1000px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-row style="display: none">
          <el-col :span="24">
            <el-form-item label="样品id">
              <el-input v-model="form.sampleId" style="width: 780px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="颜色">
              <el-input v-model="form.color" style="width: 850px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="1#">
              <el-input v-model="form.tech1" style="width: 370px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="2#">
              <el-input v-model="form.tech2" style="width: 370px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="3#">
              <el-input v-model="form.tech3" style="width: 370px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="4#">
              <el-input v-model="form.tech4" style="width: 370px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="5#">
              <el-input v-model="form.tech5" style="width: 370px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="6#">
              <el-input v-model="form.tech6" style="width: 370px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="7#">
              <el-input v-model="form.tech7" style="width: 370px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="8#">
              <el-input v-model="form.tech8" style="width: 370px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="9#">
              <el-input v-model="form.tech9" style="width: 370px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="10#">
              <el-input v-model="form.tech10" style="width: 370px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="11#">
              <el-input v-model="form.tech11" style="width: 370px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="12#">
              <el-input v-model="form.tech12" style="width: 370px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="13#">
              <el-input v-model="form.tech13" style="width: 370px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="14#">
              <el-input v-model="form.tech14" style="width: 370px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="15#">
              <el-input v-model="form.tech15" style="width: 370px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="16#">
              <el-input v-model="form.tech16" style="width: 370px;" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      size="small"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column v-if="false" prop="sampleId" label="样品id" />
      <el-table-column prop="color" label="颜色" />
      <el-table-column prop="tech1" label="1#" />
      <el-table-column prop="tech2" label="2#" />
      <el-table-column prop="tech3" label="3#" />
      <el-table-column prop="tech4" label="4#" />
      <el-table-column prop="tech5" label="5#" />
      <el-table-column prop="tech6" label="6#" />
      <el-table-column prop="tech7" label="7#" />
      <el-table-column prop="tech8" label="8#" />
      <el-table-column prop="tech9" label="9#" />
      <el-table-column prop="tech10" label="10#" />
      <el-table-column prop="tech11" label="11#" />
      <el-table-column prop="tech12" label="12#" />
      <el-table-column prop="tech13" label="13#" />
      <el-table-column prop="tech14" label="14#" />
      <el-table-column prop="tech15" label="15#" />
      <el-table-column prop="tech16" label="16#" />
      <el-table-column
        v-if="checkPer(['admin','sampleTechnology:edit','sampleTechnology:del'])"
        label="操作"
        width="150px"
        align="center"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import crudSampleTechnology from '@/api/sampleTechnology'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = {
  color: null,
  tech1: null,
  tech2: null,
  tech3: null,
  tech4: null,
  tech5: null,
  tech6: null,
  tech7: null,
  tech8: null,
  tech9: null,
  tech10: null,
  tech11: null,
  tech12: null,
  tech13: null,
  tech14: null,
  tech15: null,
  tech16: null,
  techId: null
}
export default {
  name: 'SampleTechnology',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(function() {
    return Object.assign({ sampleId: this.sid }, defaultForm)
  }), crud()],
  cruds() {
    return CRUD({
      title: '样品工艺管理',
      url: 'api/sampleTechnology',
      idField: 'techId',
      sort: 'techId,desc',
      query: {
        sampleId: ''
      },
      crudMethod: { ...crudSampleTechnology },
      optShow: {
        add: true,
        edit: true,
        del: true,
        download: true,
        toggleSearch: false,
        refresh: false,
        reset: true
      },
      queryOnPresenterCreated: false
    })
  },
  props: ['sid'],
  data() {
    return {
      queryTypeOptions: [
        { key: 'sampleId', display_name: '样品id' }
      ],
      permission: {
        add: ['admin', 'fzSamples:add'],
        edit: ['admin', 'fzSamples:edit'],
        del: ['admin', 'fzSamples:del']
      },
      rules: {
        techId: [
          { required: true, message: 'id不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    [CRUD.HOOK.beforeToAdd]() {
      return true
    },
    [CRUD.HOOK.beforeToCU]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
